/*
 * @Description:
 * @Author: Zzt
 * @Date: 2022-08-17 18:15:29
 * @LastEditTime: 2022-08-18 09:42:54
 */

import { Button, Table } from 'antd';
import Column from 'antd/es/table/Column';
import { useMemo, useState } from 'react';
import { useOfflineBackupContext } from '../contexts/OfflineBackupContext';
import OfflineDetails from './dialogs/OfflineDetails';

const PageList = () => {
  const { setSelectKey, selectItems } = useOfflineBackupContext();
  const onSelectChange = (selectedRowKeys: number[]) => {
    setSelectKey(selectedRowKeys);
  };
  const [selectTransfer, setSelectTransfer] = useState([]);
  const [FormVisible, setFormVisible] = useState(false);

  const rowSelection = {
    selectItems,
    onChange: onSelectChange
  };
  const details = (data: any) => {
    setSelectTransfer(data);
    setFormVisible(true);
  };
  const closeEditDialog = () => {
    setFormVisible(false);
  };
  return (
    <>
      <Table
        dataSource={[
          { id: 1, belongs: '每年完全备份计划' },
          { id: 2, belongs: '每年完全备份计划2' }
        ]}
        rowKey="id"
        bordered
        rowSelection={rowSelection}
      >
        <Column title="序号" dataIndex="id" key="id" align="center" />
        <Column title="名称" dataIndex="name" key="name" align="center" />
        <Column title="档案类型" dataIndex="type" key="type" align="center" />
        <Column title="所属备份计划" dataIndex="belongs" key="belongs" align="center" />
        <Column title="备份时间节点" dataIndex="finishTime" key="finishTime" align="center" />
        <Column
          title="离线文件生成时间"
          dataIndex="generateTime"
          key="generateTime"
          align="center"
        />
        <Column title="大小" dataIndex="size" key="size" align="center" />
        <Column title="原文个数" dataIndex="originalNum" key="originalNum" align="center" />
        <Column title="条目个数" dataIndex="entryNum" key="entryNum" align="center" />
        <Column
          title="状态"
          dataIndex="state"
          key="state"
          align="center"
          render={(_: any, record: any) => (
            <>{record.state === 0 ? '备份完成（100%）' : '备份中'}</>
          )}
        />
        <Column title="操作人" dataIndex="backupBy" key="backupBy" align="center" />
        <Column title="导出文件" dataIndex="exportFile" key="exportFile" align="center" />
        <Column
          title="操作"
          key="active"
          align="center"
          width={150}
          render={(_text, record: any) => (
            <>
              <Button
                type="link"
                size="small"
                onClick={() => {
                  details(record);
                }}
              >
                查看详情
              </Button>
              <Button type="link" size="small">
                删除
              </Button>
              <Button type="link" size="small">
                一键下载
              </Button>
            </>
          )}
        />
      </Table>
      {useMemo(
        () => (
          <OfflineDetails
            visible={FormVisible}
            data={selectTransfer}
            onClose={() => {
              closeEditDialog();
            }}
          />
        ),
        [FormVisible]
      )}
    </>
  );
};
export default PageList;
